<template>
  <div id="container" />
</template>

<script>
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
export default {
  mounted() {
    this.initChart()
  },
  // 图标的封装初始化
  // 1. 图表都是依赖于原生dom的 所以初始化实际必须是挂载的节点已经可用 dom已经生成
  // mounted钩子函数做这个事情
  // 2. 单独封装一个图表初始化的方法 在mounted中执行这个方法完成初始化
  methods: {
    // 初始化方法
    initChart() {
      // 准备图表依赖的数据 并处理成图表需要的样子
      const data = [
        { item: '工作效率', a: 70, b: 30 },
        { item: '考勤', a: 60, b: 70 },
        { item: '积极性', a: 50, b: 60 },
        { item: '帮助同事', a: 40, b: 50 },
        { item: '自主学习', a: 60, b: 70 },
        { item: '正确率', a: 70, b: 50 }
      ]
      const { DataView } = DataSet
      const dv = new DataView().source(data)
      dv.transform({
        type: 'fold',
        fields: ['a', 'b'], // 展开字段集
        key: 'user', // key字段
        value: 'score' // value字段
      })

      // 实例化图表 并且传入上面处理好的数据

      const chart = new Chart({
        container: 'container',
        autoFit: true,
        height: 500
      })
      chart.data(dv.rows)
      chart.scale('score', {
        min: 0,
        max: 80
      })
      chart.coordinate('polar', {
        radius: 0.8
      })
      chart.tooltip({
        shared: true,
        showCrosshairs: true,
        crosshairs: {
          line: {
            style: {
              lineDash: [4, 4],
              stroke: '#333'
            }
          }
        }
      })
      chart.axis('item', {
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              lineDash: null
            }
          }
        }
      })
      chart.axis('score', {
        line: null,
        tickLine: null,
        grid: {
          line: {
            type: 'line',
            style: {
              lineDash: null
            }
          }
        }
      })

      chart
        .line()
        .position('item*score')
        .color('user')
        .size(2)
      chart
        .point()
        .position('item*score')
        .color('user')
        .shape('circle')
        .size(4)
        .style({
          stroke: '#fff',
          lineWidth: 1,
          fillOpacity: 1
        })
      chart
        .area()
        .position('item*score')
        .color('user')

      // 调用实例的render方法 完成实际的渲染 渲染到真实的页面中
      chart.render()

      // 模拟异步数据更新图表
      // 流程：1. 拿到新数据处理成图表要求的格式 2. 重新调用实例的changeData方法自动使用新数据完成新的渲染
      setTimeout(() => {
        // 处理数据
        const newData = [
          { item: '工作效率', a: 100, b: 30 },
          { item: '考勤', a: 60, b: 70 },
          { item: '积极性', a: 70, b: 60 },
          { item: '帮助同事', a: 40, b: 50 },
          { item: '自主学习', a: 60, b: 90 },
          { item: '正确率', a: 70, b: 50 }
        ]
        const dv = new DataView().source(newData)
        dv.transform({
          type: 'fold',
          fields: ['a', 'b'], // 展开字段集
          key: 'user', // key字段
          value: 'score' // value字段
        })
        // 触发更新
        chart.changeData(dv.rows)
      }, 3000)
    }
  }
}
</script>
